<template>
  <xoFormItem :label="props.label" :tips="props.tips" :showBox="false">
    <template #header>
      <slot name="header"></slot>
    </template>
    <div class="grow form-item-inline gap-2">
      <div v-for="(tab, index) in props.tabs" :key="index" class="tab-button "
        :class="props.class + (currentSelectIndex === index ? ' tab-button-active' : '')" @click="handleClick(index)">{{
          tab
        }}</div>
    </div>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </xoFormItem>

</template>

<script setup lang='ts'>

import { ref } from 'vue';
import xoFormItem from './xoFormItem.vue';

interface IProps {
  tabs: string[]
  label?: string,
  tips?: string,
  class?: string,
}

const props = withDefaults(defineProps<IProps>(), {
  tabs: () => [] as string[],
  label: '',
  tips: '',
  class: '',
})

const currentSelectIndex = ref<number>(0)

const emits = defineEmits(['onChange'])

const handleClick = (index: number) => {
  currentSelectIndex.value = index
  emits('onChange', index)
}

</script>

<style></style>